<template>
	<view class="fond-good-box flex f-d-c">
		<view class="form-item flex a-i-c j-c-b">
			<view class="left color-333 f-s-24">
				姓名
			</view>
			<view class="right">
				<view class="box1 w-100 flex a-i-c j-c-b">
					<input class="f-s-24 input" type="text" v-model="name" placeholder="请输入您的姓名" placeholder-class="color-999"/>
				</view>
			</view>
		</view>
		<view class="form-item flex a-i-c j-c-b" @click="chooseSex">
			<view class="left color-333 f-s-24">
				性别
			</view>
			<view class="right">
				<view class="box1 w-100 flex a-i-c j-c-b">
					<input class="f-s-24 input" type="text" v-model="sex_name" placeholder="请输入您的性别" placeholder-class="color-999"/>
				</view>
			</view>
		</view>
		<view class="form-item flex a-i-c j-c-b">
			<view class="left color-333 f-s-24">
				驾龄
			</view>
			<view class="right">
				<view class="box1 w-100 flex a-i-c j-c-b">
					<input class="f-s-24 input" type="digit" v-model="age" placeholder="请输入您的驾龄" placeholder-class="color-999"/>
				</view>
			</view> 
		</view>
		<view class="form-item flex a-i-c j-c-b">
			<view class="left color-333 f-s-24">
				最低工资
			</view>
			<view class="right">
				<view class="box1 w-100 flex a-i-c j-c-b">
					<input class="f-s-24 input" type="digit" v-model="first_salary" placeholder="请选择薪资范围" placeholder-class="color-999"/>
					<image class="form-next-icon" src="@/static/images/form-next.svg" mode=""></image>
				</view>
			</view> 
		</view>
		<view class="form-item flex a-i-c j-c-b">
			<view class="left color-333 f-s-24">
				最高工资
			</view>
			<view class="right">
				<view class="box1 w-100 flex a-i-c j-c-b">
					<input class="f-s-24 input" type="digit" v-model="last_salary" placeholder="请选择薪资范围" placeholder-class="color-999"/>
					<image class="form-next-icon" src="@/static/images/form-next.svg" mode=""></image>
				</view>
			</view> 
		</view>
		<view class="form-item flex a-i-c j-c-b" @click="getChooseLocation">
			<view class="left color-333 f-s-24">
				工作地点
			</view>
			<view class="right">
				<view class="box1 w-100 flex a-i-c j-c-b">
					<input class="f-s-24 input" type="text" v-model="work_address_desc" placeholder="请输入工作地点 具体到区" placeholder-class="color-999"/>
				</view>
			</view> 
		</view>
		
		<view class="form-item flex a-i-c j-c-b">
			<view class="left color-333 f-s-24">
				联系电话
			</view>
			<view class="right">
				<view class="box1 w-100 flex a-i-c j-c-b">
					<input class="f-s-24 input" type="text" v-model="mobile" placeholder="请输入您的联系电话" placeholder-class="color-999"/>
				</view>
			</view>
		</view>
		<view class="form-item flex j-c-b m-b-30">
			<view class="left color-333 f-s-24">
				自我介绍
			</view>
			<view class="right">
				<view class="box1 w-100 flex a-i-c j-c-b">
					<textarea name="" v-model="content" placeholder="请输入您的自我介绍" placeholder-class="color-999" class="textarea-box f-s-26 color-333"></textarea>
				</view>
			</view>
		</view>
		<view class="form-item flex a-i-c j-c-b">
			<view class="left color-333 f-s-24" style="white-space: nowrap;">
				上传您的相关证件
			</view>
			<view class="right"></view> 
		</view>
		<view class="upload-form flex f-w-w">
			<block v-for="(item, index) in images" :key="index">
				<upload-box :current="index" :src="item" @del="delImage" @success="uploadSuccess"></upload-box>
			</block>
			<upload-box current="" src="" @success="uploadSuccess"></upload-box>
		</view>
		<bottom-btn :positon="true" @click="requestData">确认发布</bottom-btn>
	</view>
</template>

<script>
	import uploadBox from "@/components/myComponents/uploadBox.vue"
	import bottomBtn from "@/components/myComponents/bottomBtn.vue"
	import {reditTo} from "@/nav.js"
	export default {
		name:"findGood",
		components:{
			"upload-box":uploadBox,
			"bottom-btn":bottomBtn
		},
		data() {
			return {
				name:"",
				sex_name:"男",
				sex:1,
				mobile:"",
				age:"",
				work_address_desc:"",
				marks:"",
				content:"",
				images:[],
				first_salary:"",
				last_salary:"",
				work_lng:"",
				work_lat:"",
				lng:"",
				lat:"",
				model:[],
				is_post:"",
				id:""
			};
		},
		mounted() {
			this.getLocationThis()
			this.setPageData()
		},
		methods:{
			setPageData(){
				let str = this.$store.state.page_tab_info
				let item = {}
				if(!!str){
					item = JSON.parse(str)
					Object.keys(item).map(val=>{
						if(val!=='model'){
							this[val] = item[val]
						}
					})
					for(let key in item.model){
						this.car_name += item.model[key]+','
						this.model.push(key)
					}
				}
			},
			getLocationThis(){
				let that = this
				uni.showLoading({
					title:"定位中..."
				})
				that.$location.myGetLocation((res)=>{
					uni.hideLoading()
					that.lng = res.lng
					that.lat = res.lat
				},false)
			},
			getChooseLocation(type){
				let that = this
				that.$location.myGetLocation(res=>{
					console.log(res)
					that.work_lng = res.longitude
					that.work_lat = res.latitude
					that.work_address_desc = res.address
				})
			},
			delImage(e){
				this.images.splice(e,1)
			},
			requestData(){
				// if(this.title === ""){
				// 	uni.showToast({
				// 		title:"请输入标题",
				// 		icon:"none"
				// 	})
				// 	return
				// }
				if(this.name === ""){
					uni.showToast({
						title:"请输入姓名",
						icon:"none"
					})
					return
				}
				if(this.mobile === ""){
					uni.showToast({
						title:"请输入手机号码",
						icon:"none"
					})
					return
				}
				if(this.age === ""){
					uni.showToast({
						title:"请输入驾龄",
						icon:"none"
					})
					return
				}
				if(this.work_address_desc === ""){
					uni.showToast({
						title:"请选择工作地点",
						icon:"none"
					})
					return
				}
				if(this.first_salary === "" || this.last_salary === ''){
					uni.showToast({
						title:"请输入货物价格区间",
						icon:"none"
					})
					return
				}
				if(this.images.length<=0){
					uni.showToast({
						title:"请上传相关证件",
						icon:"none"
					})
					return
				}
				this.postSellingCar()
			},
			postSellingCar(){
				let that = this
				// return
				if(that.is_post !== ''){
					return
				}
				uni.showLoading({
					title:"提交中..."
				})
				that.is_post = '1'
				that.util.postRequest({
					url:"v1/content/work_edit",
					data:{
						name:that.name,
						mobile:that.mobile,
						images:that.images,
						lng:that.lng,
						lat:that.lat,
						type:1,
						work_lng:that.work_lng,
						work_lat:that.work_lat,
						content:that.content,
						first_salary:that.first_salary,
						last_salary:that.last_salary,
						images:that.images,
						age:that.age,
						sex:that.sex,
						id:that.id
					}
				}).then(res=>{
					uni.hideLoading()
					console.log(res)
					that.is_post=""
					// reditTo({url:'/pages/success/successPage'})
					uni.showToast({
						title:"待审核",
						duration:2500
					})
					// let timeout = setTimeout(()=>{
					// 	clearTimeout(timeout)
					// 	uni.navigateBack()
					// },2500)
				}).catch(e=>{
					uni.hideLoading()
				})
			},
			uploadSuccess(e){
				let {index,url} = e
				if(index === ''){
					this.images.push(url)
				}else{
					this.images.splice(index,1,url)
				}
			},
			chooseSex(){
				let arr = ["女","男"],that = this;
				uni.showActionSheet({
					itemList:arr,
					success(res) {
						console.log(res)
						that.sex = res.tapIndex
						that.sex_name = arr[res.tapIndex]
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.textarea-box{
		width: 100%;
		height: 158upx;
		background: #F7F7F7;
		border-radius: 8upx;
		padding: 20upx;
	}
	.fond-good-box{
		width: 100%;
		border-radius: 20upx;
		background-color: #FFFFFF;
		padding: 30upx;
		.upload-form{}
		.form-item{
			width: 100%;
			padding: 0 16upx;
			min-height: 80upx;
			.right{
				width: 430upx;
				.box1{
					.input{
						width: 380upx;
					}
				}
				.box2{
					.title{
						margin-bottom: 26upx;
						line-height: 50upx;
					}
				}
			}
			.left{
				line-height: 50upx;
			}
		}
	}
	.form-next-icon{
		width: 26upx;
		height: 26upx;
	}
	
</style>